<template>
  <div>
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-2 wd-75 center" style="color: white">{{ Title }}</div>
      </template>
    </HeaderTop>
    <section class="d-flex m-nav-container" style="height: 1.1rem">
      <section class="m-nav">
        <div
          @click="handleNavItem"
          :class="{ 'm-nav-item': true, 'm-nav-item-active': selectedTag == 'category' }"
          data-name="category"
        >
          <span>{{ LeftTitle }}</span>
          <van-icon name="play" class="m-nav-icon" size="12" />
        </div>
        <transition name="show-list">
          <div v-show="selectedTag == 'category'" class="m-nav-item-detail d-flex">
            <section class="flex-1">
              <ul class="m-category-left-box">
                <li
                  v-for="item in category"
                  :key="item.id"
                  :class="{
                    'm-category-left-li': true,
                    'm-category-left-li-active': item.id == restaurant_category_id,
                  }"
                  @click="handleCategoryLi(item)"
                >
                  <van-image width="18" height="18" :src="getImgPath(item.image_url)" />
                  <span class="fs-7" style="transform: translate(-0.3rem) translateY(0.02rem)">{{
                    item.name
                  }}</span>
                  <span class="fs-9 m-count">{{ item.count }}</span>
                  <van-icon name="arrow" />
                </li>
              </ul>
            </section>
            <section class="flex-1">
              <ul class="m-category-right-box">
                <li
                  class="m-category-right-li"
                  v-for="item in detail"
                  @click="selectedSecondCategory(item)"
                >
                  <span>{{ item.name }}</span>
                  <span>{{ item.count }}</span>
                </li>
              </ul>
            </section>
          </div>
        </transition>
      </section>
      <span class="m-nav-line"></span>
      <section class="m-nav">
        <div
          @click="handleNavItem"
          :class="{ 'm-nav-item': true, 'm-nav-item-active': selectedTag == 'sort' }"
          data-name="sort"
        >
          <span>排序</span>
          <van-icon class="m-nav-icon" name="play" size="12" />
        </div>
        <transition name="show-list">
          <div v-show="selectedTag == 'sort'" class="m-nav-item-detail">
            <ul class="sort_list_container" @click="sortList">
              <li class="sort_list_li">
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#default"></use>
                </svg>
                <p data-type="0" :class="{ sort_select: sortByType == 0 }">
                  <span>智能排序</span>
                  <svg v-if="sortByType == 0">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                  </svg>
                </p>
              </li>
              <li class="sort_list_li">
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#distance"></use>
                </svg>
                <p data-type="5" :class="{ sort_select: sortByType == 5 }">
                  <span>距离最近</span>
                  <svg v-if="sortByType == 5">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                  </svg>
                </p>
              </li>
              <li class="sort_list_li">
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hot"></use>
                </svg>
                <p data-type="6" :class="{ sort_select: sortByType == 6 }">
                  <span>销量最高</span>
                  <svg v-if="sortByType == 6">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                  </svg>
                </p>
              </li>
              <li class="sort_list_li">
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#price"></use>
                </svg>
                <p data-type="1" :class="{ sort_select: sortByType == 1 }">
                  <span>起送价最低</span>
                  <svg v-if="sortByType == 1">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                  </svg>
                </p>
              </li>
              <li class="sort_list_li">
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed"></use>
                </svg>
                <p data-type="2" :class="{ sort_select: sortByType == 2 }">
                  <span>配送速度最快</span>
                  <svg v-if="sortByType == 2">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                  </svg>
                </p>
              </li>
              <li class="sort_list_li">
                <svg>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating"></use>
                </svg>
                <p data-type="3" :class="{ sort_select: sortByType == 3 }">
                  <span>评分最高</span>
                  <svg v-if="sortByType == 3">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                  </svg>
                </p>
              </li>
            </ul>
          </div>
        </transition>
      </section>
      <span class="m-nav-line"></span>

      <section class="m-nav">
        <div
          @click="handleNavItem"
          :class="{ 'm-nav-item': true, 'm-nav-item-active': selectedTag == 'filter' }"
          data-name="filter"
        >
          <span>筛选</span><van-icon class="m-nav-icon" name="play" size="12" />
        </div>
        <transition name="show-list">
          <div v-show="selectedTag == 'filter'" class="m-nav-item-detail">
            <section class="mx-4 mb-4">
              <header class="fs-8 my-4">配送方式</header>
              <ul class="m-dis">
                <li
                  v-for="(item, index) in distributions"
                  :key="index"
                  class="m-dis-item"
                  @click="selectDeliveryMode(item.id)"
                >
                  <svg :style="{ opacity: item.id == 0 && delivery_mode !== 0 ? 0 : 1 }">
                    <use
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      :xlink:href="delivery_mode == item.id ? '#selected' : '#fengniao'"
                    ></use>
                  </svg>
                  <span :class="{ 'text-1': true, selected_filter: delivery_mode == item.id }">{{
                    item.text
                  }}</span>
                </li>
              </ul>
            </section>
            <section class="mx-4 mb-4">
              <header class="fs-8 my-4">商家属性&nbsp;(可以多选)</header>
              <ul class="m-dis">
                <li
                  v-for="(item, index) in attr"
                  :key="index"
                  class="m-dis-item"
                  @click="selectAttr(item)"
                >
                  <svg v-show="item.status">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                  </svg>
                  <span
                    v-show="!item.status"
                    class="m-deliver-icon"
                    :style="`color:#${item.icon_color};border-color:#${item.icon_color}`"
                    >{{ item.icon_name }}</span
                  >
                  <span :class="{ 'text-1': true, selected_filter: item.status }">{{
                    item.name
                  }}</span>
                </li>
              </ul>
            </section>
            <footer class="m-filter-sort">
              <van-button class="m-btn" @click="clearAllAttr">清空</van-button>
              <van-button class="m-btn" type="success" @click="selectedAllAttrAndMode">
                <span v-if="!sum">确定</span>
                <span v-else>确定({{ sum }})</span>
              </van-button>
            </footer>
          </div>
        </transition>
      </section>
    </section>
    <transition name="mask-fade" mode="out-in">
      <mask
        v-show="maskIsShow"
        style="
          position: fixed;
          background-color: black;
          opacity: 0.25;
          width: 100vw;
          height: 100vh;
          z-index: -2;
        "
      ></mask>
    </transition>
    <div style="position: relative" class="mt-11">
      <shopList
        ref="shopListNode"
        style="position: absolute; z-index: -3; width: 100%"
        :latitude="latitude"
        :longitude="longitude"
        :order_by="sortByType"
        :delivery_mode="delivery_mode"
        :restaurant_category_id="restaurant_category_id"
        :support_ids="support_ids"
        :restaurant_category_ids="restaurant_category_ids"
      ></shopList>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import { getCategoryOfShop, getActivityAttr, getModeOfDistribution } from "@/api";
import {
  shopCategory_format,
  subCategories_format,
  activityAttr_format,
  distributions_format,
} from "@/type/index";
import { constPinia } from "@/store/index";
import { storeToRefs } from "pinia";
import { getImgPath } from "@/uitls/path";
import { title } from "process";
import Shop from "@/components/common/ShopList.vue";
const store = constPinia();
const router = useRouter();
const { latitude, longitude } = storeToRefs(store);
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  headTitle: {
    type: String,
  },
});
//选中的标签
const selectedTag = ref<string>("");
//选中的分类标签id
const restaurant_category_id = ref<number>();
//选中的分类标签的子项数组
const selectedLiDetail = ref<subCategories_format[]>();
const { id, headTitle } = toRefs(props);
//最左边的标题
const LeftTitle = ref<string>();
//导航栏标题
const Title = ref<string>();
//遮罩是否显示
const maskIsShow = ref<boolean>(false);

//获取商品展示组件
const shopListNode = ref<{ reload: Function }>();

//选择后重新加载
const reload = () => {
  shopListNode.value.reload();
  selectedTag.value = null;
  maskIsShow.value = false;
};
//获取分类
const category = ref<shopCategory_format[]>();
const getCategory = async (callback: Function) => {
  const res = await getCategoryOfShop<shopCategory_format[]>();
  category.value = res;
  callback();
};

//获取配送方式
const distributions = ref<distributions_format[]>();
const getDistributions = async () => {
  const res = await getModeOfDistribution<distributions_format[]>({
    latitude: latitude.value,
    longitude: longitude.value,
  });
  distributions.value = res;
};
//获取商家活动属性
const attr = ref<activityAttr_format[]>();
const getAttr = async () => {
  const res = await getActivityAttr<activityAttr_format[]>({
    latitude: latitude.value,
    longitude: longitude.value,
  });
  attr.value = res;
};
//点击导航栏
const handleNavItem = event => {
  const name = event.currentTarget.dataset.name;
  if (name != selectedTag.value) {
    selectedTag.value = name;
    maskIsShow.value = true;
    if (name == "category") {
      LeftTitle.value = "分类";
    }
  } else {
    selectedTag.value = "";
    maskIsShow.value = false;
    if (name == "category") {
      LeftTitle.value = headTitle.value;
    }
  }
};
//点击分类标签
const restaurant_category_ids = ref<number[]>([]);
const handleCategoryLi = (item: shopCategory_format) => {
  restaurant_category_id.value = item.id;
  selectedLiDetail.value = item.sub_categories;
};
//点击第二分类
const selectedSecondCategory = item => {
  restaurant_category_ids.value[0] = item.id;
  Title.value = LeftTitle.value = item.name;
  reload();
};
//点击第一分类并且展示第二分类
const detail = computed(() => {
  if (selectedLiDetail.value?.length) {
    return selectedLiDetail.value.filter(item => {
      return item.level == 1 ? false : true;
    });
  }
});
//点击排序标签
const sortByType = ref<number>(1);
const sortList = event => {
  const node = event.target.nodeName.toLowerCase() == "p" ? event.target : event.target.parentNode;
  sortByType.value = parseInt(node.dataset.type);
  reload();
};

//选中配送方式
const delivery_mode = ref<number>(null);
const selectDeliveryMode = (id: number) => {
  if (delivery_mode.value == null) {
    delivery_mode.value = id;
  } else if (delivery_mode.value != id) {
    delivery_mode.value = id;
  } else {
    delivery_mode.value = null;
  }
};
//选中活动属性
const selectAttr = item => {
  if (!item.status) {
    item.status = true;
  } else {
    item.status = false;
  }
};
//获取所有选中属性数组
const support_ids = computed(() => {
  return attr.value?.reduce((pre, cur) => {
    cur.status && pre.push(cur.id);
    return pre;
  }, []);
});
//选中的数量
const sum = computed(() => {
  const flag = delivery_mode.value == null ? 0 : 1;
  return attr.value?.reduce((pre, cur) => {
    const n = cur.status ? 1 : 0;
    return pre + n;
  }, flag);
});
//清空所有选中
const clearAllAttr = () => {
  attr.value.forEach(item => {
    item.status = false;
  });
  delivery_mode.value = null;
};
//确认选中的配送方式和商家属性
const selectedAllAttrAndMode = () => {
  reload();
};
//初始化
const initData = () => {
  const value = parseInt(id.value);
  Title.value = LeftTitle.value = headTitle.value;
  restaurant_category_id.value = value;
  getCategory(() => {
    category.value.forEach(item => {
      if (item.id == value) {
        selectedLiDetail.value = item.sub_categories;
      }
    });
  });
  getDistributions();
  getAttr();
};
//调用初始化函数
initData();
</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
@import "@/assets/scss/animation.scss";
.m-nav-container {
  position: fixed;
  top: 1.25rem;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -1;
}
.m-nav {
  flex: 1;
  border-bottom: 0.02rem $Lighter solid;
  background-color: white;
  .m-nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: $text-2;
    font-size: 0.33rem;
    .m-nav-icon {
      transform: rotate(90deg);
      transition: all 0.2s linear;
    }
  }
  .m-nav-item-active {
    color: #3190e8;
    .m-nav-icon {
      transform: rotate(270deg);
      transition: all 0.2s linear;
    }
  }
  .m-nav-item-detail {
    position: absolute;
    top: 1.1rem;
    left: 0;
    width: 100%;
    background-color: white;
    border-top: 0.025rem solid $Lighter;
    z-index: -1;
    .m-category-left-box {
      height: 9rem;

      .m-category-left-li {
        height: 1rem;
        color: $text-2;
        display: flex;
        align-items: center;
        background-color: $tc;
        justify-content: space-around;
        .m-count {
          padding: 0.03rem 0.1rem;
          background-color: $text-4;
          color: white;
          border-radius: 0.15rem;
          transform: translateX(0.25rem);
        }
      }
      .m-category-left-li-active {
        background-color: white;
      }
    }
    .m-category-right-box {
      overflow-y: auto;
      height: 9rem;
      padding: 0 0.2rem 0 0.2rem;

      .m-category-right-li {
        height: 1rem;
        color: $text-2;
        display: flex;
        background-color: white;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.3rem 0 0.3rem;
        border-bottom: 0.01rem $Light solid;
      }
    }
    .sort_list_container {
      width: 100%;
      .sort_list_li {
        height: 1.5rem;
        width: 100%;
        display: flex;
        align-items: center;
        svg {
          height: 0.44rem;
          width: 0.44rem;
          margin: 0 0.5rem 0 0.4rem;
        }
        p {
          flex: auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: $text-2;
          font-size: 0.35rem;
          border-bottom: 0.02rem $Light solid;
          height: 1.5rem;
          line-height: 1.5rem;
          padding: 0 0.2rem;
        }
        .sort_select {
          span {
            color: #3190e8;
          }
        }
      }
    }
    .m-dis {
      display: grid;
      grid-template-columns: repeat(3, 33.3%);
      grid-template-rows: 1.2rem;
      align-items: center;
      justify-items: center;
      .m-dis-item {
        border: 0.01rem solid $Light;
        padding: 0.2rem 0.4rem 0.2rem 0.2rem;
        display: flex;
        width: 2rem;
        height: 0.5rem;
        justify-content: space-around;
        align-items: center;
        border-radius: 0.05rem;
        font-size: 0.25rem;
        svg {
          width: 0.48rem;
          height: 0.48rem;
          margin-right: 0.2rem;
        }
        .selected_filter {
          color: #3190e8;
        }
        .m-deliver-icon {
          border: 0.01rem solid;
          padding: 0.08rem;
          border-radius: 0.08rem;
          font-size: 0.3rem;
        }
      }
    }
  }
}
.m-filter-sort {
  display: flex;
  justify-content: space-between;
  padding: 0.15rem;
  background-color: $bc;
  .m-btn {
    width: 48%;
  }
}
.m-nav-line {
  height: 60%;
  width: 0.012rem;
  background-color: $Base;
  display: inline-block;
  transform: translateY(30%);
}
</style>
